<script>
import axios from "axios";
import DynamicDetail from "@/components/dialog/DynamicDetail.vue";
import ReviewDetail from "@/components/dialog/ReviewDetail.vue";
import FriendData from "@/components/dialog/FriendData.vue";

export default {
  name: 'DynamicView',
  components: {FriendData, ReviewDetail, DynamicDetail},
  data() {
    return {
      pub_mode: '公开',
      pl_input: [],
      input: "",
      fileList: [],
      dynamic_loading: false,
      type: 0,
      dynamicId: '',
      dynamic_list: [
        {
          uid: "",
          avatar: "",
          nickname: "",
          time: "",
          isFriend: "",
          content: "",
          attachments: [''],
          review_list: [
            {likes: 0}
          ]
        }
      ],
      review_dialog: false,
      review_input: '',
      reviewId: '',
      reviewTitle: '',
      reviewList_dialog: false,
      review_item: '',
      data_dialog: false,
      friendID: "",
      search: ""
    }
  },
  methods: {
    clickAvatar(id) {
      if (id !== this.$store.state.user.id) {
        this.friendID = id;
        this.data_dialog = true
      }
    },
    searchDynamic() {
      if (this.search !== '') {
        this.dynamic_loading = true
        axios.get(`/api/dynamic/search/${this.search}`)
            .then(res => {
              this.dynamic_loading = false
              if (res.data.code === 0) {
                this.dynamic_list = res.data.data
                this.$nextTick(() => {

                  let a = document.getElementsByClassName('pl_btn_show')
                  for (let i = 0; i < a.length; i++) {
                    a[i].style.display = 'none'
                  }
                  let b = document.getElementsByClassName('cz_box_c')
                  for (let i = 0; i < b.length; i++) {
                    b[i].classList.remove('cz_box_c')
                  }
                  let c = document.getElementsByClassName('menu_hov')
                  this.type = -1
                  for (let i = 0; i < c.length; i++) {
                    c[i].classList.remove('f_color')
                  }
                })

              } else {
                this.$message.warning(res.data.msg)
              }
            }).catch(err => this.$message.error(err))


      } else {
        this.$message.warning("请输入搜索内容")
      }

    },
    getDynamicList() {
      this.dynamic_loading = true
      axios.get("/api/dynamic/list")
          .then(res => {
            this.dynamic_loading = false
            if (res.data.code === 0) {
              this.dynamic_list = res.data.data
            } else {
              this.$message.warning(res.data.msg)
            }
          }).catch(err => this.$message.error(err))
    },
    getDynamicListForFriend() {
      this.dynamic_loading = true
      axios.get("/api/dynamic/list/friend")
          .then(res => {
            this.dynamic_loading = false
            if (res.data.code === 0) {
              this.dynamic_list = res.data.data
            } else {
              this.$message.warning(res.data.msg)
            }
          }).catch(err => this.$message.error(err))
    },
    getDynamicListForMy() {
      this.dynamic_loading = true
      axios.get("/api/dynamic/list/my")
          .then(res => {
            this.dynamic_loading = false
            if (res.data.code === 0) {
              this.dynamic_list = res.data.data
            } else {
              this.$message.warning(res.data.msg)
            }
          }).catch(err => this.$message.error(err))
    },
    handleCommand(command) {
      switch (command) {
        case '1':
          this.pub_mode = '朋友圈'
          break
        case '2':
          this.pub_mode = '公开'
          break
        case  '3':
          this.pub_mode = '私密'
          break
      }
    },
    lxClick(j) {
      this.type = j

      let a = document.getElementsByClassName('menu_hov')
      for (let i = 0; i < a.length; i++) {
        a[i].classList.remove('f_color')
      }
      a[j].classList.add('f_color')


      let c = document.getElementsByClassName('pl_btn_show')
      for (let i = 0; i < c.length; i++) {
        c[i].style.display = 'none'
      }


      let b = document.getElementsByClassName('cz_box_c')
      for (let i = 0; i < b.length; i++) {
        b[i].classList.remove('cz_box_c')
      }


    },
    plClick(e, id, index) {
      let div = e.target
      if (div.tagName === 'I')
        div = div.parentNode
      let pl = div.parentNode.nextSibling
      if (div.classList.contains('cz_box_c')) {
        div.classList.remove('cz_box_c')
        pl.style.display = 'none'
      } else {
        div.classList.add('cz_box_c')
        pl.style.display = 'block'
        axios.get(`/api/review/time/${id}`)
            .then(res => {
              this.dynamic_list[index].review_list = res.data.data
            })
      }

    },
    dzClick2(e, id, c_index, f_index) {
      let div = e.target
      if (div.tagName !== 'I') {
        div = div.firstElementChild
      }
      if (div.classList.contains('icon-dianzan')) {
        axios.get(`api/review/like/${id}`)
            .then(res => {
              if (res.data.code === 0) {
                div.classList.remove('icon-dianzan')
                div.classList.add('icon-dianzan_kuai')
                div.classList.add('f_color')
                this.dynamic_list[f_index].review_list[c_index].likes++
              } else {
                this.$message.warning(res.data.msg)
              }
            })

      } else {
        axios.get(`api/review/unlike/${id}`)
            .then(res => {
              if (res.data.code === 0) {
                div.classList.remove('icon-dianzan_kuai')
                div.classList.remove('f_color')
                div.classList.add('icon-dianzan')
                this.dynamic_list[f_index].review_list[c_index].likes--
              } else {
                this.$message.warning(res.data.msg)
              }
            })
      }
    },
    dzClick1(e, id, index) {
      let div = e.target
      if (div.tagName !== 'I') {
        div = div.firstElementChild
      }
      if (div.classList.contains('icon-dianzan')) {
        axios.get(`api/dynamic/like/${id}`)
            .then(res => {
              if (res.data.code === 0) {
                div.classList.remove('icon-dianzan')
                div.classList.add('icon-dianzan_kuai')
                this.dynamic_list[index].likes++
                div.classList.add('f_color')
              } else {
                this.$message.warning(res.data.msg)
              }
            })

      } else {
        axios.get(`api/dynamic/unlike/${id}`)
            .then(res => {
              if (res.data.code === 0) {
                div.classList.remove('icon-dianzan_kuai')
                div.classList.remove('f_color')
                div.classList.add('icon-dianzan')
                this.dynamic_list[index].likes--
              } else {
                this.$message.warning(res.data.msg)
              }
            })
      }
    },
    showBigPic(e) {
      let big = document.getElementsByClassName('big_pic')[0]
      big.parentNode.style.display = 'flex'
      big.src = e.target.src
    },
    exitBigPic(e) {
      let div = e.target
      if (div.tagName === 'IMG')
        div = div.parentNode
      div.style.display = 'none'
    },
    handleRemove(file) {
      this.fileList = this.fileList.filter(item => item.uid !== file.uid)
    },
    handlePictureCardPreview(file) {
      let big = document.getElementsByClassName('big_pic')[0]
      big.parentNode.style.display = 'flex'
      big.src = file.url
    },
    handleChange(file, fileList) {
      let fileSize = file.size
      const FIVE_M = 10 * 1024 * 1024
      if (fileSize > FIVE_M) {
        this.$message.warning("最大上传10M")
        this.handleRemove(file)
        return
      }
      const typeArray = [".jpg", ".png", ".JPG", ".PNG"];
      const type = file.name.substring(file.name.lastIndexOf("."));
      const isImage = typeArray.indexOf(type) > -1;
      if (!isImage) {
        this.$message.warning("上传文件只能是png、jpeg、jpg格式!");
        this.handleRemove(file)
        return
      }
      this.fileList = fileList
    },
    addPicClick(e) {
      let upload = document.getElementById('upload')

      if (e.target.parentNode.classList.contains('add_pic_box_c')) {
        e.target.parentNode.classList.remove('add_pic_box_c')
        upload.style.display = 'none'

      } else {
        e.target.parentNode.classList.add('add_pic_box_c')
        upload.style.display = 'block'
      }

    },
    releaseDynamic() {
      if (this.input === '') {
        this.$message.warning("输入点内容吧")
        return
      }
      let form_data = new FormData();
      form_data.append("uid", this.$store.state.user.id)
      form_data.append("content", this.input)
      let status = 0
      switch (this.pub_mode) {
        case "公开":
          status = 1
          break
        case "私密":
          status = 0
          break
        case "朋友圈":
          status = 2
          break
      }
      form_data.append("status", status)
      for (let file of this.fileList) {
        form_data.append("files", file.raw)
      }
      axios.post("/api/dynamic", form_data)
          .then(res => {
            if (res.data.code === 0) {
              this.$message.success(res.data.msg)
              switch (this.type) {
                case 0:
                  this.getDynamicList()
                  break
                case 1:
                  this.getDynamicListForFriend()
                  break
                case 2:
                  this.getDynamicListForMy()
                  break
              }
              this.fileList = []
              this.input = ""
            } else {
              this.$message.warning(res.data.msg)
            }
          })
    },
    follow(fid) {
      axios.get(`/api/friends/add/${fid}`)
          .then(() => {
            for (let i = 0; i < this.dynamic_list.length; i++) {
              if (this.dynamic_list[i].uid === fid) {
                this.dynamic_list[i].isFriend = true
              }
            }
            let date = new Date()
            this.$bus.$emit("sendMessage", {
              uid: fid,
              time: `${date.getFullYear()}${String(date.getMonth() + 1).padStart(2, '0')}${String(date.getDate()).padStart(2, '0')}${String(date.getHours()).padStart(2, '0')}${String(date.getMinutes()).padStart(2, '0')}`,
              context: `${this.$store.state.user.nickname}关注了你`
            })

            let formData = new FormData()
            formData.set("fid", fid)
            formData.set("content", `${this.$store.state.user.nickname}关注了你`)
            axios.post("/api/chat/add", formData)
            this.$message.success("已关注对方")
          })
          .catch(err => this.$message.error(err))
    },
    review(index, id) {
      if (this.pl_input[index] !== '') {
        axios.get(`/api/review/${id}/${this.pl_input[index]}`)
            .then(res => {
              if (res.data.code === 0) {
                this.pl_input[index] = ''
                this.$message.success('评论成功')
                this.getDynamicList()
              } else {
                this.$message.warning(res.data.msg)
                this.getDynamicList()
              }
            })
      } else {
        this.$message.warning("请输入内容")
      }

    },
    back() {
      this.dynamicId = ''
    },
    setReviewId() {
      this.reviewId = ''
    },
    setReview(item) {
      this.reviewId = item.id
      this.review_input = ''
      this.reviewTitle = '回复@' + item.nickname
      this.review_dialog = true
    },
    recover() {
      if (this.review_input !== '') {
        axios.get(`/api/review/recover/${this.reviewId}/${this.review_input}`)
            .then(res => {
              this.review_dialog = false
              if (res.data.code === 0) {
                this.$message.success("回复成功")
                if (!this.reviewList_dialog) {
                  if (this.dynamicId === '') {
                    this.getDynamicList()
                  } else {
                    this.$bus.$emit('setHaveReview')
                  }
                } else {
                  this.$bus.$emit('getRecover')
                }

              } else {
                this.$message.warning(res.data.msg)
                this.getDynamicList()
              }
            }).catch(err => this.$message.error(err))
      } else {
        this.$message.warning("请输入内容")
      }

    },
    setRecover(item) {
      this.review_item = item
      this.reviewList_dialog = true
    },
    exitRecover() {
      this.reviewList_dialog = false
    },
    setStatus(id, status) {
      axios.get(`/api/dynamic/status/${id}/${status}`)
          .then(() => {
            switch (this.type) {
              case 0:
                this.getDynamicList()
                break
              case 1:
                this.getDynamicListForFriend()
                break
              case 2:
                this.getDynamicListForMy()
                break
            }
          }).catch(err => this.$message.error(err))
    },
    delDynamic(id) {
      axios.get(`/api/dynamic/del/${id}`)
          .then(() => {
            switch (this.type) {
              case 0:
                this.getDynamicList()
                break
              case 1:
                this.getDynamicListForFriend()
                break
              case 2:
                this.getDynamicListForMy()
                break
            }
          }).catch(err => this.$message.error(err))
    }
  },
  watch: {
    type: {
      immediate: true,
      handler(value) {
        switch (value) {
          case 0:
            this.getDynamicList()
            break
          case 1:
            this.getDynamicListForFriend()
            break
          case 2:
            this.getDynamicListForMy()
            break
        }
      }
    },
    "dynamic_list.length": {
      immediate: true,
      handler(value) {
        this.pl_input = new Array(value)
      }
    },
    dynamicId(value) {
      if (value === '') {
        this.getDynamicList()
      }
    }
  }
}
</script>

<template>
  <div class="cont_box">
    <div class="data_dialog">
      <el-dialog :visible.sync="data_dialog" title="她说梦里全都有的主页" top="10vh" width="70%" destroy-on-close>
        <friend-data :id="friendID"></friend-data>
      </el-dialog>
    </div>
    <el-dialog :visible.sync="review_dialog" :title="reviewTitle" top="20vh" width="35%" :close="setReviewId"
               append-to-body destroy-on-close>
      <div class="hf_box">
        <el-input type="textarea" placeholder="发布你的回复" v-model="review_input"
                  resize="none" :maxlength="256" :rows="3"></el-input>
      </div>
      <button class="pl_btn hf_btn" @click="recover">回复</button>
    </el-dialog>


    <el-dialog :visible.sync="reviewList_dialog" top="10vh" width="40%" destroy-on-close append-to-body>
      <review-detail :review="review_item" :init="reviewList_dialog" @exit="exitRecover" @setReview="setReview"
                     @getDynamicList="getDynamicList"></review-detail>
    </el-dialog>
    <div v-if="dynamicId === ''">
      <div class="cont_top">
        <div class="input">
          <el-input type="textarea"
                    resize="none"
                    placeholder="有什么新鲜事要分享给大家"
                    maxlength="255"
                    v-model="input"
                    :rows="4"></el-input>
          <el-upload
              id="upload"
              action="#"
              ref="upload"
              list-type="picture-card"
              :auto-upload="false"
              :on-change="handleChange"
              style="margin-top: 20px;display: none"
              :file-list="fileList">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url" alt=""
              >
              <span class="el-upload-list__item-actions">
                  <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
            </div>
          </el-upload>
          <div class="cont_top_bottom">
            <div class="add_pic_box">
              <img :src="require('@/assets/img/图片.png')" alt="">
              <a @click="addPicClick">添加图片</a>
            </div>
            <div class="ctb_right_box">
              <el-dropdown @command="handleCommand" split-button type="primary" trigger="click" class="gk">
                {{ pub_mode }}
                <el-dropdown-menu>
                  <el-dropdown-item command="1" v-show="pub_mode !=='朋友圈'">朋友圈</el-dropdown-item>
                  <el-dropdown-item command="2" v-show="pub_mode !=='公开'">公开</el-dropdown-item>
                  <el-dropdown-item command="3" v-show="pub_mode !=='私密'">私密</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <button class="send" @click="releaseDynamic">发布</button>
            </div>

          </div>
        </div>
      </div>
      <div class="cont_menu">
        <div class="cont_menu_left">
          <div class="menu_box">
            <div class="menu_hov f_color" @click="lxClick(0)">全部</div>
            <div class="menu_hov" @click="lxClick(1)">朋友圈</div>
            <div class="menu_hov" @click="lxClick(2)">我的</div>
          </div>
        </div>
        <div class="cont_menu_right">
          <el-input placeholder="搜索动态" v-model="search">
            <el-button slot="append" icon="el-icon-search" @click="searchDynamic"></el-button>
          </el-input>
        </div>
      </div>
      <div class="cont_cont_box" v-for="(item,index) in dynamic_list" :key="index" v-loading="dynamic_loading">
        <div class="ccb_top">
          <el-avatar :src="item.avatar"
                     class="ccb_avatar" @click.native="clickAvatar(item.uid)"></el-avatar>
          <div class="ccb_top_right">
            <div class="ccb_nick">{{ item.nickname }}
              <i class="el-icon-lock" style="color: #409EFF" v-show="item.status === 0"></i>
              <i class="el-icon-help" style="color: #409EFF" v-show="item.status === 2"></i>
              <span style="font-size: 13px;color: #cdcdcd;margin-left: 5px"
                    v-if="item.uid === $store.state.user.id && type !== 2">我发布的</span>
<!--              <button class="gz_btn" v-if="item.uid !== $store.state.user.id && type === 0" :disabled="item.isFriend"-->
<!--                      @click="follow(item.uid)">-->
<!--                {{ item.isFriend ? '已关注' : '关注' }}-->
<!--              </button>-->
            </div>
            <div class="ccb_time">{{ item.time }}</div>
          </div>

          <div class="tt_right" v-if="type === 2">
            <el-dropdown>
              <i class="el-icon-arrow-down"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-show="item.status !==2" @click.native="setStatus(item.id,2)">朋友圈
                </el-dropdown-item>
                <el-dropdown-item v-show="item.status !==1" @click.native="setStatus(item.id,1)">公开</el-dropdown-item>
                <el-dropdown-item v-show="item.status !==0" @click.native="setStatus(item.id,0)">私密</el-dropdown-item>
                <el-dropdown-item style="color: #f44336" @click.native="delDynamic(item.id)">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <div class="ccb_text_box">
          {{ item.content }}
        </div>
        <div class="ccb_pic_box" v-if="item.attachments.length > 0">
          <div class="pic_box_item" v-for="(p_item,p_index) in item.attachments" :key="p_index">
            <img class="small_pic" :src="p_item" alt=""
                 @click="showBigPic">
          </div>
        </div>
        <div class="ccb_cz_box">
          <div class="cz_box"><i class="iconfont icon-fenxiang1"></i> 快传</div>
          <div @click="plClick($event,item.id,index)" class="cz_box"><i class="iconfont icon-pinglun"></i> 评论</div>
          <div class="cz_box" @click="dzClick1($event,item.id,index)"><i
              :class="item.isLiked?'iconfont icon-dianzan_kuai f_color':'iconfont icon-dianzan' "></i> {{ item.likes }}
          </div>
        </div>
        <div class="pl_btn_show" style="display: none">
          <div class="part_line"></div>
          <div class="pl_box">
            <div class="pl_k">
              <el-avatar class="pl_avatar" :src="$store.state.user.avatar"></el-avatar>
              <el-input placeholder="发布你的评论" class="pl_input" autosize v-model="pl_input[index]"
                        resize="none" :maxlength="200" clearable></el-input>
              <button class="pl_btn" @click="review(index,item.id)">评论</button>
            </div>

          </div>
          <div>
            <div class="part_line"></div>
            <div class="qb_pl_box" v-if="item.review_list.length > 0">
              <div class="px_xq" v-for="(r_item,r_index) in item.review_list" :key="r_index">
                <el-avatar class="px_xq_avatar" :src="r_item.avatar"></el-avatar>
                <div class="px_xq_r">
                  <div class="pl_nr">
                    <span>{{ r_item.nickname }}</span>:
                    {{ r_item.content }}
                  </div>
                  <div class="px_xq_b">
                    <div class="pl_time">{{ r_item.time }}</div>
                    <div class="pl_xq_cz">
                      <i class="iconfont icon-fenxiang1"></i>
                      <i class="iconfont icon-pinglun" @click="setReview(r_item)"></i>
                      <span><i :class="r_item.isLiked?'iconfont icon-dianzan_kuai f_color':'iconfont icon-dianzan' "
                               @click="dzClick2($event,r_item.id,r_index,index)"></i>{{ r_item.likes }}</span>
                    </div>
                  </div>
                  <div class="zk_hf" v-if="r_item.haveReview" @click="setRecover(r_item)">查看回复</div>
                </div>
              </div>
              <div class="px_qb" @click="dynamicId=item.id">
                查看全部评论 <i class="el-icon-arrow-right"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
<!--      <div class="cont_cont_box" v-if="false">-->
<!--        <div class="ccb_top">-->
<!--          <el-avatar src=""-->
<!--                     class="ccb_avatar"></el-avatar>-->
<!--          <div class="ccb_top_right">-->
<!--            <div class="ccb_nick">青青草原我最狂-->
<!--              <button class="gz_btn" disabled>已关注</button>-->
<!--            </div>-->
<!--            <div class="ccb_time">昨天 12:29</div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="sp">-->
<!--          <video controls style="width: 100%;height: 100%">-->
<!--            <source :src="require('@/assets/vio/MyVideo_2.mp4')" type="video/mp4">-->
<!--            您的浏览器不支持HTML5 video 标签-->
<!--          </video>-->
<!--        </div>-->
<!--        <div class="ccb_text_box">-->
<!--        </div>-->

<!--        <div class="ccb_pic_box">-->
<!--        </div>-->
<!--        <div class="ccb_cz_box">-->
<!--          <div class="cz_box"><i class="iconfont icon-fenxiang1"></i> 快传</div>-->
<!--          <div @click="plClick" class="cz_box"><i class="iconfont icon-pinglun"></i> 评论</div>-->
<!--          <div class="cz_box" @click="dzClick1"><i class="iconfont icon-dianzan"></i> 点赞</div>-->
<!--        </div>-->
<!--        <div style="display: none">-->
<!--          <div class="part_line"></div>-->
<!--          <div class="pl_box">-->
<!--            <div class="pl_k">-->
<!--              <el-avatar class="pl_avatar" src=""></el-avatar>-->
<!--              <el-input placeholder="发布你的评论" class="pl_input" autosize v-model="test" type="textarea" :rows="1"-->
<!--                        resize="none" :maxlength="256"></el-input>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
      <div style="margin-top: 10px;height: 5px"></div>
    </div>
    <div v-else>
      <dynamic-detail :id="dynamicId" @back="back" @setRecover="setRecover" @setReview="setReview"></dynamic-detail>
    </div>

    <h2 v-show="dynamicId === '' && dynamic_list.length === 0 ">动态都看完了</h2>

  </div>
</template>

<style>
.f_color {
  color: #409EFF;
}

.cont_top {
  display: flex;
  width: 100%;
  border-radius: 5px;
  padding-top: 30px;
  padding-bottom: 20px;
  background-color: #ffffff;
  flex-direction: column;

  .el-icon-zoom-in:hover {
    color: #409EFF;
  }

  .el-icon-delete:hover {
    color: #f44336;
  }
}

.input {
  width: 95%;
  margin: 0 auto;

  .el-textarea__inner {
    background-color: #f1f2f5;
    border-radius: 10px;
  }
}

.cont_top_bottom {
  margin-top: 20px;
}


.ctb_right_box {
  float: right;
}

.gk {
  margin-right: 40px;
  height: 20px;

  .el-button {
    line-height: 20px;
    padding: 0 0 0 10px;
    border: none;
  }

  .el-button-group > .el-button:first-child {
    border-radius: 10px 0 0 10px;
  }

  .el-button-group > .el-button:last-child {
    border-radius: 0 10px 10px 0;
    width: 30px;
  }
}

.gk button {
  height: 35px;
  background-color: #f1f2f5;
  font-size: 13px;
  color: black;
}

.gk button:hover, .gk button:focus {
  background-color: #f1f2f5;
  color: black;
}

.ctb_right_box .send:hover {
  background-color: #4076ff;
  cursor: pointer;
}

.ctb_right_box .send {

  background-color: #409EFF;
  color: white;
  width: 80px;
  height: 40px;
  font-size: 16px;
  border: none;
  border-radius: 15px;
}

.add_pic_box {
  padding-top: 8px;
  padding-left: 10px;
  float: left;
  width: 120px;
  height: 40px;
  line-height: 32px;
}

.add_pic_box_c {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.add_pic_box img {
  float: left;
  height: 30px;
  width: 30px;
}

.add_pic_box a {
  font-size: 17px;
  margin-left: 9px;
}

.add_pic_box:hover {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 10px;

}

.add_pic_box a:hover {
  color: #409EFF;
}

.cont_menu {
  margin-top: 15px;
  height: 50px;
  width: 100%;
  border-radius: 5px;
  background-color: #ffffff;
}

.cont_menu_left {
  margin-top: 10px;
  margin-left: 20px;
  float: left;
  cursor: pointer;
}

.menu_hov {
  float: left;
  width: 60px;
  height: 30px;
  margin-right: 20px;
  text-align: center;
  line-height: 30px;
}

.menu_hov:hover {
  float: left;
  border-radius: 10px;
  background-color: #409EFF;
  color: white;
}

.cont_menu_right {
  margin-top: 10px;
  margin-right: 40px;
  float: right;

  .el-input__inner {
    height: 30px;
    width: 120px;
    border-radius: 15px 0 0 15px;
    background-color: #f1f2f5;
  }

  .el-input-group__append {
    border-radius: 0 15px 15px 0;
    width: 0;
  }

  .el-button {
    padding: 9px;
  }
}

.cont_cont_box {
  display: flex;
  padding: 30px 0;
  width: 100%;
  border-radius: 5px;
  margin-top: 15px;
  background-color: #ffffff;
  flex-direction: column;
}

.ccb_top {
  margin-left: 40px;

  .el-avatar {
    height: 80px;
    width: 80px;
  }
}

.ccb_avatar {
  float: left;
}

.ccb_top_right {
  height: 80px;
  float: left;
  margin-left: 20px;
}

.ccb_nick {
  height: 40px;
  line-height: 50px;
  font-size: 19px;
  font-weight: bold;
}

.gz_btn {
  height: 27px;
  width: 52px;
  border-radius: 10px;
  border: 1px solid #409EFF;
  background-color: white;
  cursor: pointer;
  font-size: 12px;
  margin-left: 20px;
}

.gz_btn:hover {
  background-color: #409EFF;
  color: white;

}


.ccb_time {
  height: 40px;
  line-height: 35px;
  color: #7e8a8c;
}

.ccb_text_box, .ccb_pic_box, .sp {
  margin-left: 140px;
  word-wrap: break-word;
  width: 80%;
}

.sp {
  margin-top: 20px;
  height: 400px;
  padding: 20px;
  width: 70%;
  background-color: #f1f2f5;
  border-radius: 10px;
}

.pic_box_item {
  height: 200px;
  margin-top: 20px;
  float: left;
  margin-right: 20px;
  background-color: #f1f2f5;
}

.pic_box_item .small_pic {
  max-height: 100%;
  max-width: 100%;
  border-radius: 10px;
  cursor: url("../../assets/img/搜索 (1).png") 16 16, auto;
}

.ccb_cz_box {
  width: 100%;
  justify-content: space-around;
  margin-top: 20px;
  display: flex;
  cursor: pointer;
}

.cz_box {
  width: 75px;
  height: 40px;
  padding-left: 10px;
  line-height: 40px;

}

.cz_box_c {
  background-color: #f1f2f5;
  color: #409EFF;
  border-radius: 10px;
}

.cz_box:hover {
  background-color: #f1f2f5;
  color: #409EFF;
  border-radius: 10px;
}

.ccb_cz_box i {
  float: left;
  font-size: 25px;
  margin-right: 4px;
}

.pl_box {
  margin: 0 auto;
  width: 80%;

  .el-avatar {
    height: 50px;
    width: 50px;
  }
}

.pl_k {
  margin-top: 10px;
  display: flex;

  .el-avatar {
    height: 50px;
    width: 50px;
  }

  .el-input {
    width: 80%;
  }

  .el-textarea__inner {
    background-color: #f1f2f5;
    border-radius: 10px;
  }
}


.pl_input {
  margin-left: 20px;
  margin-top: 10px;
}

.pl_btn {
  height: 40px;
  width: 70px;
  margin-left: 10px;
  margin-top: 10px;
  border-radius: 15px;
  border: none;
  color: #ffffff;
  cursor: pointer;
  background-color: #409EFF;
}

.hf_btn {
  margin-top: 20px;
  margin-left: 85%;
}

.hf_box {
  margin: 0 auto;
}

.qb_pl_box {
  width: 80%;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

.px_xx {
  width: 130px;
  display: flex;
  justify-content: space-between;
  font-size: 19px;
}

.tt_right {
  float: right;
  margin-right: 30px;
  font-size: 25px;
  cursor: pointer;
}

.px_xx_c {
  color: #409EFF;
  font-weight: bold
}

.px_xx a:hover {
  font-weight: bold;
  color: #409EFF;
}

.px_xq {
  width: 100%;
}

.px_qb {
  color: #409EFF;
  font-weight: bold;
  text-align: center;
  margin-top: 20px;
  cursor: pointer;
}

.px_xq_avatar {
  margin-top: 20px;
  float: left;
}

.px_xq_r {
  margin-top: 20px;
  float: left;
  width: 90%;
  margin-left: 20px;

}

.pl_nr {
  word-wrap: break-word;
}

.pl_nr span {
  color: #409EFF;
}

.px_xq_b {
  margin-top: 5px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.pl_time {
  color: #7e8a8c;
  font-size: 13px;
}

.pl_xq_cz {
  width: 180px;
  display: flex;
  justify-content: space-around;
}

.pl_xq_cz i {
  cursor: pointer;
  font-size: 20px;
}

.pl_xq_cz i:hover {
  color: #409EFF;
}

.zk_hf {
  font-size: 13px;
  color: #409EFF;
  cursor: pointer;
}


</style>